<template>
  <el-dialog
    :title="title"
    :visible.sync="isVisible"
    :width="width"
    :before-close="handleClose"
    :lock-scroll="true"
    :close-on-click-modal="false"
    custom-class="pub_dialog"
    @open="getData"
  >
    <VForm
      ref="vformComponents"
      :form="formData.form"
      :options="formData.options"
      :rules="formData.rules"
      :labelWidth="formData.labelWidth"
      :rowspan="rowspan"
    ></VForm>

    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="sure">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  alarmFacilityDeviceTypeDetail,
  alarmFacilityDeviceTypeUpdate,
  alarmFacilityDeviceTypeAdd, alarmFacilityDeviceTypeDelete, alarmFacilityTypeList
} from '@/api/alarm/deviceType'
import VForm from "@/components/VForm/index";

export default {
  components: {
    VForm,
  },
  props: {
    width: {
      type: String,
      default: "70%",
    },
    title: {
      type: String,
      default: "详情",
    },
    id: {},
    openType: {
      type: String,
      default: "add"
    },
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    'width': {
      handler(newVal, oldVal) {
        console.log('newVal===', newVal, oldVal)
        let w = this.width.split('%')[0]
        if (w >= 60) {
          this.rowspan = 2
        } else {
          this.rowspan = 1
        }
      },
      deep: true,
      immediate: true
    },
    'facilityType': {
      handler(newVal, oldVal) {
        this.formData.options.forEach(t => {
          if (t.key == 'facilityTypeId') {
            t.option.data = newVal
          }
        })
      },
      deep: true,
      immediate: true
    },
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.close()
      }
    }
  },
  data() {
    return {
      rowspan: 1,
      dict: {},
      formData: {
        form: {
          facilityTypeId: "",
          name: "",
          code: "",
          nature:"",
          remark: "",
        },
        options: [
          {
            title: "设施类型",
            key: "facilityTypeId",
            type: "select",
            multiple: false,
            option: {
              data: this.facilityType,
              props: {
                key: "id", // 指定key对应data的字段
                label: "name", // 指定label对应data的字段
                value: "id", // 指定value对应data的字段
              },
            },
          },
          {
            title: "设备类型",
            key: "name",
            type: "text",
          },
          {
            title: "设备类型编号",
            key: "code",
            type: "text",
          },
          {
            title: "设备性质",
            key: "nature",
            type: "text",
          },
          {
            title: "备注",
            key: "remark",
            type: "text",
          },
        ],
        rules: {
          facilityTypeId: [],
          name: [
            {max: 64, message: '长度最大为64个字符', trigger: 'blur'}
          ],
          code: [
            {max: 20, message: '长度最大为20个字符', trigger: 'blur'}
          ],
          nature: [
            {max: 1024, message: '长度最大为1024个字符', trigger: 'blur'}
          ],
          remark: [
            {max: 128, message: '长度最大为128个字符', trigger: 'blur'}
          ],
        },
        labelWidth: "140px",
      },
      // 字典
      facilityType: [],
    };
  },
  methods: {
    submitFormat() {
    },
    loadFormat() {
    },
    getCheckBoxData(value, option, type) {
      if (type == "submit") {
        if (value.length == 0) {
          return null
        }
        let temp = [];
        value.forEach(t => {
          let item = option.find(x => x.label == t)
          if (item != undefined) {
            temp.push(item.value)
          }
        })
        return temp.join(",")
      } else {
        if (!value) {
          return []
        } else {
          let data = value.split(",")
          let temp = []
          data.forEach(t => {
            let item = option.find(x => x.value == t)
            if (item != undefined) {
              temp.push(item.label)
            }
          })
          return temp
        }
      }
    },
    sure() {
      console.log('sure===', this.formData.form)
      this.$refs.vformComponents.$refs.form.validate().then(res => {
        this.submitFormat()
        if (this.openType == "add") {
          this.add()
        } else {
          this.update()
        }
      })
    },
    add() {
      this.formData.form.id = null
      alarmFacilityDeviceTypeAdd(this.formData.form).then(res => {
        if (res.code == 200) {
          this.$message({
            message: this.$t('tips.createSuccess'),
            type: 'success'
          })
          this.closeSuccess()
        } else {
          this.$message({
            message: this.$t('tips.systemException'),
            type: 'error'
          })
        }
      })
    },
    update() {
      alarmFacilityDeviceTypeUpdate(this.formData.form).then(res => {
        if (res.code == 200) {
          this.$message({
            message: this.$t('tips.updateSuccess'),
            type: 'success'
          })
          this.closeSuccess()
        } else {
          this.$message({
            message: this.$t('tips.systemException'),
            type: 'error'
          })
        }
      })
    },
    cancel() {
      this.close()
    },
    handleClose(done) {
      done()
      this.close()
    },
    closeSuccess() {
      this.$refs.vformComponents.$refs.form.resetFields();
      this.$emit('success')
    },
    close() {
      this.$refs.vformComponents.$refs.form.resetFields();
      this.$emit('close')
    },
    getData() {
      if (this.openType != "add") {
        alarmFacilityDeviceTypeDetail(this.id).then(res => {
          if (res.code == 200) {
            this.formData.form = res.data
            this.loadFormat()
          } else {
            this.$message({
              message: this.$t('tips.systemException'),
              type: 'error'
            })
          }
        })
      }
      this.facilityType = this.getFacilityType();
    },
    getFacilityType() {
      alarmFacilityTypeList().then(res => {
        if (res.code == 200) {
          this.facilityType = res.data
          this.loadFormat()
        } else {
          this.$message({
            message: this.$t('tips.systemException'),
            type: 'error'
          })
        }
      })
    },
  },
};
</script>

<style lang="scss" scoped>

</style>
